<template>
  <el-card shadow="never"
           style="min-height:385px;overflow: auto;"
           body-style="padding: 14px 5px 0 0;">
    <div slot="header"
         class="flex-between">
      <span>数据统计</span>
      <div>

        <div :class="[
			  'ele-inline-block',
			  { 'hidden-md-and-down': styleResponsive }
			]"
             style="width: 260px; margin-left: 10px">
          <el-date-picker unlink-panels
                          type="daterange"
                          class="ele-fluid"
                          @change="selsectTime"
                          :default-time="['00:00:00', '23:59:59']"
                          value-format="yyyy-MM-dd"
                          end-placeholder="结束日期"
                          start-placeholder="开始日期"
                          v-model="datetime"
                          range-separator="至"
                          size="small" />
        </div>
      </div>
    </div>
    <v-chart ref="visitHourChart"
             style="min-height:  305px;overflow: auto"
             :option="visitHourChartOption" />

    <!-- <el-empty :image-size="185" v-else description="暂无数据"></el-empty> -->
  </el-card>
</template>
	
	<script>
import { amountStatistics } from '@/api/headStatistics/index'

import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { LineChart } from 'echarts/charts';
import {
  GridComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components';
import VChart from 'vue-echarts';

import { echartsMixin } from '@/utils/echarts-mixin';
import moment from 'moment';
use([
  CanvasRenderer,
  LineChart,
  GridComponent,
  TooltipComponent,
  LegendComponent
]);

export default {
  components: { VChart },
  mixins: [echartsMixin(['visitHourChart'])],
  data () {
    return {
      // 最近1小时访问情况折线图配置
      visitHourChartOption: {},
      datetime: [],
      form: {


        start_time: null,
        end_time: null
      },
      // 当天时间的实例
      currentMoment: null,
      labelStatus: 0,
      useData: null
    };
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    }
  },
  created () {
    this.todayFn(0);
    this.getVisitHourData();
  },
  methods: {
    selsectTime (timeArr) {
      console.log(timeArr);
      if (timeArr) {
        this.form.start_time = timeArr[0];
        this.form.end_time = timeArr[1];

        this.labelStatus = null;
        this.getVisitHourData();
      } else {
        this.form.start_time = null;
        this.form.end_time = null;
        this.currentMoment = moment();
        this.currentMoment.startOf('day');



        this.labelStatus = 0;
        this.todayFn(0)
      }
    },
    // 获取当天
    todayFn (val) {
      console.log(val);
      if (val) {
        this.currentMoment = moment();
        const currentDate = this.currentMoment.format('YYYY-MM-DD');
        console.log(currentDate);
        // 减去一天的时间
        this.currentMoment.startOf('day');
        const previousDate = this.currentMoment.subtract(7, 'days');

        // 格式化为指定的字符串格式（YYYY-MM-DD HH:mm:ss）
        const formattedDate = previousDate.format('YYYY-MM-DD');
        console.log(formattedDate);
        this.form.start_time = currentDate;
        this.form.end_time = formattedDate;

        this.datetime = [];
        this.getVisitHourData();
      } else {
        this.datetime = [];
        this.currentMoment = moment();
        this.currentMoment.startOf('day');

        const currentDate = this.currentMoment.format('YYYY-MM-DD');
        console.log(currentDate);

        (this.form.start_time = currentDate);
        this.form.end_time = currentDate;
        this.getVisitHourData();
      }
    },

    /* 获取最近1小时访问情况数据 */
    getVisitHourData () {
      console.log('getVisitHourData', this.form)
      amountStatistics(this.form)
        .then((data) => {
          this.useData = data.data;

          this.visitHourChartOption = {
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: ['用户消费', '套餐卡使用次数', '用户充值'],
              right: 20
            },
            xAxis: [
              {
                type: 'category',
                boundaryGap: false,
                data: this.useData.consumption_amount.map((d) => d.datetime)
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                name: '用户消费',
                type: 'line',
                smooth: true,
                symbol: 'none',
                areaStyle: {
                  opacity: 0.5
                },
                data: this.useData.consumption_amount.map((d) => d.amount)
              },
              {
                name: '套餐卡使用次数',
                type: 'line',
                smooth: true,
                symbol: 'none',
                areaStyle: {
                  opacity: 0.5
                },
                data: this.useData.package_count.map((d) => d.count)
              },
              {
                name: '用户充值',
                type: 'line',
                smooth: true,
                symbol: 'none',
                areaStyle: {
                  opacity: 0.5
                },
                data: this.useData.recharge_data.map((d) => d.amount)
              }
            ]
          };
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    }
  }
};
	</script>
	<style lang="less" scoped></style>
	